<template>
	<view class="msg_card">
		<view class="card-body">
			<view class="avatar">
				<u-avatar :src="info.avatar" mode="square" size="80"></u-avatar>
			</view>
			<view class="info u-line-1">
				<text class="u-font-32">{{info.name}}</text>
			</view>
		</view>
		<view class="card-foot">
			<text class="u-font-32 u-m-r-10" :class="typeIns.icon"></text>
			<text class="u-font-28">{{typeIns.name}}</text>
		</view>
	</view>
</template>

<script>
	import { ConversationType } from '@/entity/ConversationType'
	export default{
		props:{
			info:{
				type:Object,
				required:true
			}
		},
		computed:{
			typeIns(){
				if(this.info.type==ConversationType.Group){
					return {
						icon:'none',
						name:'群名片'
					}
				}else if(this.info.type==ConversationType.Single){
					return {
						icon:'none',
						name:'个人名片'
					}
				}
				return {
					icon:'none',
					name:'名片'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.msg_card{
		width: 400rpx;
		.card-body{
			background-color: #0081ff;
			color: #ffffff;
			border-radius: 10rpx 10rpx 0 0 ;
			padding: 20rpx;
			display: flex;
			align-items: center;
			.avatar{
				flex-shrink: 0;
				margin-right: 20rpx;
			}
			.info{
				flex: 1;
				width: 200rpx;
			}
		}
		.card-foot{
			background-color: #ffffff;
			color: #AAAAAA;
			border-radius: 0 0 10rpx 10rpx;
			padding: 6rpx 20rpx;
			display: flex;
			align-items: center;
		}
	}
</style>
